<template>
    <div class="content">
        <div class="clearfix">
            <Form class="f-fl" inline :label-width="5">
                <FormItem>
                    <Input
                        v-model="params.fieldA"
                        placeholder="学生姓名/学生学号"
                    ></Input>
                </FormItem>
                <FormItem>
                    <Select v-model="params.fieldB" placeholder="班级" style="width:100px" clearable>
                    </Select>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="search">搜索</Button>
                </FormItem>
                <FormItem>
                    <Button @click="clearSearch">清空</Button>
                </FormItem>
            </Form>
            <div class="f-fr">
                <Button style="margin-left: 10px;" @click="handleScoreExport">导出</Button>
            </div>
        </div>
        <Table :data="list" :columns="columns"></Table>
        <Pagination
            :pageSize.sync="params.pageSize"
            :current.sync="params.pageNum"
            :total="params.total"
            @change="queryList"
        />
    </div>
</template>
<script>

export default {
    data () {
        return {
            params: {
                total: 0,
                pageNum: 1,
                pageSize: 10,
                fieldA: '',
                fieldB: ''
            },
            list: [],
            columns: Object.freeze([
                { title: '序号', type: 'index', align: 'center', width: 80 },
                { title: '学生姓名', key: 'field2', align: 'center' },
                { title: '学生学号', key: 'field3', align: 'center' },
                { title: '答题量', key: 'field4', align: 'center' },
                { title: '客观题准确率', key: 'field5', align: 'center' },
                { title: '练习次数', key: 'field6', align: 'center' },
                { title: '练习时长（分钟）', key: 'field7', align: 'center' },
                { title: '最近练习时间', key: 'field8', align: 'center' }
            ])
        }
    },
    created () {
        this.queryList()
    },
    methods: {
        search () {
            this.params.pageNum = 1
            this.queryList()
        },
        queryList () {
            this.list = Array(10)
                .fill(0)
                .map((val, i) => {
                    return {
                        id: i,
                        field1: `学生姓名${i}`,
                        field2: `学生学号${i}`,
                        field3: `答题量${i}`,
                        field4: `答题量${i}`,
                        field5: `客观题准确率${i}`,
                        field6: `练习次数${i}`,
                        field7: `练习时长（分钟）${i}`,
                        field8: `最近练习时间${i}`
                    }
                })
        },
        handleScoreExport () {},
        clearSearch () {}
    }
}
</script>
